<template>
  <div v-loading="loading">
    <el-row :gutter="10" class="w-full! m-x-0!">
      <!-- 基本信息 -->
      <!--       <el-col :xs="24" :sm="24" :md="19" :lg="18" :xl="20">
 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <UserBasicInfo :user="user">
          <template #header>
            <div class="card-header">
              <div class="flex items-center">
                <CardTitle title="基本信息" />
                <el-avatar :src="user.avatar" class="ml-10px" size="small" />
                <el-divider direction="vertical" />
                ID:{{ user.id }}
              </div>

              <!-- <el-button size="small" text type="primary" @click="openForm('update')">
                编辑
              </el-button> -->
            </div>
          </template>
        </UserBasicInfo>
      </el-col>
      <!-- <el-col :xs="24" :sm="24" :md="5" :lg="6" :xl="4" class="detail-info-item">
        <UserRankInfo :user="user">
          <template #header>
            <div class="card-header">
              <CardTitle title="排行榜" />
            </div>
          </template>
        </UserRankInfo>
      </el-col> -->

      <!-- 服务卡项信息 -->
      <!-- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="detail-info-item mt-10px">
        <UserServiceCardInfo :user="user">
          <template #header>
            <div class="card-header">
              <div class="flex items-center">
                <CardTitle title="服务卡项信息" /><el-divider direction="vertical" />
                有效数量:35张<el-divider direction="vertical" />时效将至:32张
              </div>
            </div>
          </template>
        </UserServiceCardInfo>
      </el-col> -->
      <!-- 服务卡项消耗 -->
      <!-- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="detail-info-item mt-10px">
        <UserServiceConsumeInfo :user="user">
          <template #header>
            <div class="card-header">
              <CardTitle title="寄存与卡项消耗" />
            </div>
          </template>
        </UserServiceConsumeInfo>
      </el-col> -->
      <!-- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="detail-info-item mt-10px">
        <UserConsumeInfo :user="user" :wallet="wallet">
          <template #header>
            <div class="card-header">
              <CardTitle title="消费信息" />
            </div>
          </template>
        </UserConsumeInfo>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="detail-info-item mt-10px">
        <UserAssetsInfo :user="user" :wallet="wallet">
          <template #header>
            <div class="card-header">
              <CardTitle title="资产信息" />
            </div>
          </template>
        </UserAssetsInfo>
      </el-col> -->
      <!-- 用户健康数据 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="detail-info-item mt-10px">
        <UserWeightInfo :user="user">
          <template #header>
            <div class="card-header">
              <div class="flex items-center">
                <CardTitle title="健康数据" />
                <!-- <el-divider direction="vertical" />
                综合得分:68分<el-divider direction="vertical" />BMI18.8 标准 -->
              </div>
            </div>
          </template>
        </UserWeightInfo>
      </el-col>
      <!-- 下边：账户明细 -->
      <!-- TODO 芋艿：【订单管理】【售后管理】【收藏记录】-->
      <el-col :span="24">
        <el-card header="账户明细" shadow="never" style="width: 100%; margin-top: 10px">
          <template #header>
            <CardTitle title="账户明细" />
          </template>
          <el-tabs>
            <el-tab-pane label="剩余卡项">
              <UserSpuCardList :user-id="id" />
            </el-tab-pane>
            <el-tab-pane label="卡类资产" lazy>
              <UserAssetsCardList :user-id="id" @update-balance="handleUpdateBlance" />
            </el-tab-pane>
            <el-tab-pane label="会员余额" lazy>
              <UserBalanceList :wallet-id="wallet.id" />
            </el-tab-pane>
            <el-tab-pane label="订单列表" lazy>
              <UserOrderList :user-id="id" />
            </el-tab-pane>
            <el-tab-pane label="服务订单" lazy>
              <UserServiceList :user-id="id" />
            </el-tab-pane>
            <el-tab-pane label="欠款订单" lazy>
              <UserDebtList :user-id="id" />
            </el-tab-pane>
            <el-tab-pane label="还款订单" lazy>
              <UserRefundList :user-id="id" />
            </el-tab-pane>

            <el-tab-pane label="售后管理" lazy>
              <UserAfterSaleList :user-id="id" />
            </el-tab-pane>

            <el-tab-pane label="代金劵" lazy>
              <UserCouponList :user-id="id" />
            </el-tab-pane>
            <el-tab-pane label="积分" lazy>
              <UserPointList :user-id="id" />
            </el-tab-pane>
            <el-tab-pane label="成长值" lazy>
              <UserExperienceRecordList :user-id="id" />
            </el-tab-pane>
            <el-tab-pane label="签到" lazy>
              <UserSignList :user-id="id" />
            </el-tab-pane>
            <el-tab-pane label="推广用户" lazy>
              <UserBrokerageList :bind-user-id="id" />
            </el-tab-pane>

            <el-tab-pane label="收藏记录" lazy>
              <UserFavoriteList :user-id="id" />
            </el-tab-pane>
            <el-tab-pane label="收货地址" lazy>
              <UserAddressList :user-id="id" />
            </el-tab-pane>
            <!-- <el-tab-pane label="寄存订单" lazy>
              <UserDepositList :user-id="id" />
            </el-tab-pane>
            <el-tab-pane label="提货订单" lazy>
              <UserPickUpList :user-id="id" />
            </el-tab-pane> -->

            <el-tab-pane label="体脂数据" lazy>
              <UserWeightList :user-id="id" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <!-- 表单弹窗：添加/修改 -->
  <UserForm ref="formRef" @success="getUserData(id)" />
  <!-- 修改用户余额弹窗 -->
  <UserBalanceUpdateForm ref="UpdateBalanceFormRef" @success="getUserData(id)" />
</template>
<script lang="ts" setup>
import * as WalletApi from '@/api/pay/wallet/balance'
import * as UserApi from '@/api/member/user'
import * as TagApi from '@/api/member/tag'

import { useTagsViewStore } from '@/store/modules/tagsView'
import UserForm from '@/views/member/user/UserForm.vue'
import UserServiceCardInfo from './UserServiceCardInfo.vue'
import UserServiceConsumeInfo from './UserServiceConsumeInfo.vue'
import UserConsumeInfo from './UserConsumeInfo.vue'
import UserAssetsInfo from './UserAssetsInfo.vue'
import UserAddressList from './UserAddressList.vue'
import UserBasicInfo from './UserBasicInfo.vue'
import UserRankInfo from './UserRankInfo.vue'
import UserBrokerageList from './UserBrokerageList.vue'
import UserCouponList from './UserCouponList.vue'
import UserExperienceRecordList from './UserExperienceRecordList.vue'
import UserOrderList from './UserOrderList.vue'
import UserRefundList from './UserRefundList.vue'
import UserDebtList from './UserDebtList.vue'
import UserPointList from './UserPointList.vue'
import UserSignList from './UserSignList.vue'
import UserFavoriteList from './UserFavoriteList.vue'
import UserAfterSaleList from './UserAftersaleList.vue'
import UserBalanceList from './UserBalanceList.vue'
import UserSpuCardList from './UserSpuCardList.vue'
import UserAssetsCardList from './UserAssetsCardList.vue'
import UserServiceList from './UserServiceList.vue'
import UserDepositList from './UserDepositList.vue'
import UserPickUpList from './UserPickUpList.vue'
import UserWeightInfo from './UserWeightInfo.vue' //体重信息
import UserWeightList from './UserWeightList.vue' //体脂数据
import UserBalanceUpdateForm from './../components/UserBalanceUpdateForm.vue'
import { CardTitle } from '@/components/Card/index'
import { ElMessage } from 'element-plus'

defineOptions({ name: 'MemberDetail' })

const loading = ref(true) // 加载中
const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
const tags = ref()
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string) => {
  formRef.value.open(type, id)
}

/** 获得用户 */
const getUserData = async (id: number) => {
  loading.value = true
  try {
    user.value = await UserApi.getUser(id)
  } finally {
    loading.value = false
  }
}
const getTagList = async () => {
  tags.value = await TagApi.getSimpleTagList()
}
/** 初始化 */
const { currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const id = Number(route.params.id)
/* 用户钱包相关信息 */
const WALLET_INIT_DATA = {
  balance: 0,
  totalExpense: 0,
  totalRecharge: 0
} as WalletApi.WalletVO // 钱包初始化数据
const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息

/** 查询用户钱包信息 */
const getUserWallet = async () => {
  if (!id) {
    wallet.value = WALLET_INIT_DATA
    return
  }
  const params = { userId: id }
  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
}
/** 更新余额 */
const UpdateBalanceFormRef = ref()
const handleUpdateBlance = () => {
  UpdateBalanceFormRef.value.open(id)
}
onMounted(() => {
  if (!id) {
    ElMessage.warning('参数错误，会员编号不能为空！')
    delView(unref(currentRoute))
    return
  }
  getUserData(id)
  getUserWallet()
  getTagList()
})
</script>
<style lang="css" scoped>
/* .detail-info-item:first-child {
  padding-left: 0 !important;
} */

/* first-child 不生效有没有大佬给看下q.q */
/* .detail-info-item:nth-child(2) {
  padding-right: 0 !important;
} */

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
